<template>
  <div class="home-navigator">
    <navigator></navigator>
  </div>
  <el-row>
    <el-col span="24">
      <div class="home-as-box">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in imgArr" :key="item.id">
            <a target="_blank" href="https://www.eastmoney.com/">
              <img class="home-as" :src="item.idView">
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <div class="el-icon">
      <i class="el-icon-notebook-2" style="font-size: 25px;color: #003399"></i>
      热门条件单推荐
    </div>
  </el-row>
  <el-row>
    <div class="home-goods">
      <el-col :span="8" v-for="item in goodsArr" :key="item.commodityId" :offset="1">
        <div class="home-goods-card">
          <el-card :body-style="{ padding: '0px' }">
            <div class="home-goods-img">
              <img src="@/assets/home/img.png"
                   class="image">
            </div>
            <div style="padding: 14px;">
              <span class="condition-sheet" style="width: 20px;margin-left: -5px">{{ item.commodityName }}</span>
              <span class="price" style="margin-left: 20px;color: red">¥{{ item.commodityPrice }}</span>
              <div class="bottom" style="margin-top: 10px">
                <el-button type="primary" size="medium" round @click="checkDetail(item.commodityId)">立即购买</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </div>
  </el-row>
  <el-divider style="margin-top: 120px">专业全面的金融交易服务</el-divider>
  <div class="home-introduce-box">
    <div class="home-introduce-img">
      <img src="@/assets/home/fdata.png">
    </div>
    <div class="test">
      <h>金融大数据</h>
      <p>提供各类资产的财务、因子、主题、宏观行业特色大数据,以及显化场景下的PIT数据。保障量化过程不引入未来数据。</p>
    </div>
  </div>
  <div class="home-introduce-box">
    <div class="home-introduce-img">
      <img src="@/assets/home/backtest.png">
    </div>
    <div class="test">
      <h>精准回测</h>
      <p>股票、期货、指数、场内外基金等多资产多策略回测。丰富的衍生工具,保证多因子策略、事件驱动等快速实现。</p>
    </div>
  </div>
  <div class="home-introduce-box">
    <div class="home-introduce-img">
      <img src="@/assets/home/combination.png">
    </div>
    <div class="test">
      <h>组合优化</h>
      <p>高性能的组合优化器,基于风险模型,让您可以灵活地选择优化目标,不断实现投资价值的增值。</p>
    </div>
  </div>
  <div class="home-introduce-box">
    <div class="home-introduce-img">
      <img src="@/assets/home/risk.png">
    </div>
    <div class="test">
      <h>风险模型</h>
      <p>接轨国际化风险模型算法,采用优质原始数据,提供10种风格因子、28种行业因子,全面揭示市场行业风险。</p>
    </div>
  </div>
</template>

<style>
.home-as-box {
  width: 1519px;
  height: 200px;
  margin-left: -8px;
}

.home-as {
  width: 100%;
  height: 100%;
}

.el-icon {
  vertical-align: middle;
  float: left;
  margin-top: 10px;
}

.home-goods {
  width: 100%;
  margin-top: 30px;
}

.home-goods-card {
  margin-left: 5px;
}

.home-goods-img {
  width: 215px;
  height: 235px;
}

.image {
  height: 100%;
  width: 100%;
}

.home-introduce-box {
  width: 210px;
  height: 70px;
  float: left;
  margin-top: 40px;
  margin-left: 150px;
}

.home-introduce-img {
  width: 20px;
  height: 20px;
  margin-bottom: 60px;
}

.test {
  margin-left: -75px;
  width: 210px;
  height: 70px;
}

</style>

<script lang="ts" src="./home.ts"></script>
